<template>
	<div>
		<div class="new-li" v-for="(item,index) in bzData" :key="index">
			<a :href="item.link" target="_blank">
			<div class="new-li-head">
				<img class="nl-head-img" src="https://wx4.sinaimg.cn/orj360/9461d9fcly1i083zgfmaqj20wi0ycdi0.jpg" alt="">
				<p class="nl-head-h2">斌味十足</p>
				<p class="nl-head-time">
					<span>{{ item.date }}</span>
					<span>技术博主</span>
				</p>
				<!-- <el-button class="nl-head-follow" round>+ 关注</el-button> -->
			</div>
			<div class="new-li-info">{{ item.title }}</div>
			<!-- <div class="new-li-img">
				<div class="nl-img"><img src="https://wx4.sinaimg.cn/orj360/9461d9fcly1i083zgfmaqj20wi0ycdi0.jpg"></div>
				<div class="nl-img"><img src="https://wx4.sinaimg.cn/orj360/899637f2ly1i0842uy5kgj20wi13utbv.jpg"></div>
				<div class="nl-img"><img src="https://wx2.sinaimg.cn/orj360/899637f2ly1i0842v772dj20wi1g6jut.jpg"></div>
			</div> -->
			<div class="new-li-statistics">
				<p class="nl-span" title="热度"><i class="iconfont icon-resou2"></i>{{ item.heat }}</p>
			</div>
			</a>
		</div>
	</div>
</template>

<script setup>
	import axios from 'axios';
	import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
	const { appContext } = getCurrentInstance();
	const dateTime = appContext.config.globalProperties.$getToDay;
	const data = reactive({
		bzData: [],
	})
	const { 
		bzData
	} = toRefs(data);
	onMounted(() => {
		bizhanList();
	})
	// B站热搜获取
	function bizhanList() {
		axios({
		    method:"GET",
		    url: 'https://v.api.aa1.cn/api/bilibili-rs/',
		    data: {},
		    headers: {
		        'Content-Type': 'application/json',
		    }
		})
		.then(res => {
		    console.log(res)
			data.bzData = res.data;
			data.bzData.map(item => {
				item.date = dateTime
			})
		})
		.catch(error => {
		    console.error("There was an error!", error);
		});
	}
</script>

<style>
</style>